<template>
  <el-card>
    <div style="margin-bottom: 20px; font-size: 20px;color: #606266;">版本管理</div>
    <div class="search-container">
<!--      <el-input class="search-wrap" />-->
<!--      <el-button type="primary" icon="search">查询</el-button>-->
      <el-button type="primary" icon="add" class="addBtn" @click="handleAdd">新增版本</el-button>
      <!--      <el-button type="primary" icon="add" @click="handleRefresh">刷新</el-button>-->
    </div>

    <el-table
      :data="versionList"
      style="width: 100%"
    >
      <el-table-column
        prop="versionNum"
        width="120px"
        label="对外版本号"
      />

      <el-table-column
        prop="classifyId"
        width="200px"
        label="模板类型"
      >
        <template slot-scope="scope">
          <span>【{{ classifyMap[scope.row.classifyCode] }}】</span> - <span>{{ tplMap[scope.row.classifyCode + scope.row.templateCode] }}</span>
        </template>
      </el-table-column>

      <el-table-column
        prop="updateMsg"
        label="更新说明"
      >
        <template slot-scope="scope">
          <div class="template-remark">{{ scope.row.updateMsg }}</div>
        </template>
      </el-table-column>

      <el-table-column
        prop="templateUserDesc"
        label="开发备注"
      >
        <template slot-scope="scope">
          <div>【模板ID】{{ scope.row.templateId }}</div>
          <div>【开发版本号】{{ scope.row.templateUserVersion }}</div>
          <div class="template-remark">【开发备注】{{ scope.row.templateUserDesc }}</div>
        </template>
      </el-table-column>

      <el-table-column
        prop="updateTime"
        align="center"
        label="更新时间"
      />
      <el-table-column align="center" label="操作" width="150px">
        <template slot-scope="scope">
          <el-button size="small" type="primary" class="editBtn" @click="handleEdit(scope.row)">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      class="pagination"
      :current-page.sync="pageNum"
      :page-size="pageSize"
      :page-sizes="[8,15,20]"
      layout="total, sizes, prev, pager, next"
      :total="total"
      @current-change="handleCurrentChange"
      @size-change="handleSizeChange"
    />
    <version-dialog ref="versionDialog" />
  </el-card>
</template>

<script>
/* eslint-disable no-console */
import VersionDialog from '../components/VersionDialog'
import { getVersionPage, refreshVersion } from '@/api/wxapp'
import { getClassifyTplMap } from '@/api/wxappClassify'

export default {
  name: 'Version',
  components: {
    VersionDialog
  },
  data() {
    return {
      loading: false,
      dialogFormVisible: false,
      templateListVisible: false,
      pageNum: 1,
      pageSize: 8,
      total: 0,
      versionList: [],
      activeName: 'classify',
      form: {
        name: '',
        classifyId: '',
        templateId: '',
        templateUserDesc: '',
        templateUserVersion: '',
        versionNum: '',
        updateMsg: '',
        extJson: ''
      },
      classifyMap: {},
      tplMap: {}
    }
  },
  mounted() {
    getClassifyTplMap().then(res => {
      this.classifyMap = res.data[0]
      this.tplMap = res.data[1]
    })
    this.getVersionList()
  },
  methods: {

    getVersionList() {
      const data = {
        pageSize: this.pageSize,
        pageNum: this.pageNum
      }
      return getVersionPage(data).then((resp) => {
        this.versionList = resp.data.list
        this.total = resp.data.total
        return resp
      })
    },

    handleCurrentChange(cur) {
      this.pageNum = cur
      this.getVersionList()
    },
    handleSizeChange(cur) {
      this.pageSize = cur
      this.pageNum = 1
      this.getVersionList()
    },
    handleEdit(row) {
      this.$refs.versionDialog.edit(row.id).then(() => {
        this.getVersionList()
      })
    },
    handleAdd() {
      this.$refs.versionDialog.add().then(() => {
        this.getVersionList()
      })
    },
    handleRefresh() {
      this.loading = true
      refreshVersion().then(res => {
        this.loading = false
        this.pageNum = 1
        this.getVersionList()
      }).catch(() => {

      })
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  .pagination {
    margin-top: 20px;
  }

  .template-remark {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }

  .search-container {
    margin-top: 20px;
    margin-bottom: 20px
  }
  .search-container .addBtn{
  	  background-color: $navBgc;
	  border: none;
  }
  .editBtn{
	  background-color: $navBgc;
	  border: none;
  }
  

  .search-wrap {
    width: 300px;
    margin-right: 10px
  }
</style>
